<template>
	<view class="content">
		<view class="top">
			<image class="layer_background" src="/static/image/banner2@2x.png"></image>
			<image class="layer_logo" src="/static/image/logo0@2x.png" mode="aspectFit"></image>
			<view class="toDoList" @click="callThePolice()">
				<image src="../../static/image/tousu@2x.png"></image>
				<text>告警信息：有{{quantityTotal}}个告警信息</text>
			</view>
		</view>
		<view class="chart">
			<view class="main_chart">
				<view class="main_chart_left" @click="healthData()">
					<view class="main_chart_left_top">
						<image src="/static/image/jiankangshuju@2x.png" mode="aspectFit"></image>
					</view>
					<view class="main_chart_left_buttom">
						<h4>健康数据</h4>
						<span>精准身体数据，为老人的健康保驾护航</span>
					</view>
				</view>
				<view class="main_chart_right">
					<view class="main_chart_top" @click="orderOnline()">
						<view class="main_chart_top_img">
							<image src="../../static/image/gouwuche-2@2x.png" mode="aspectFit"></image>
						</view>
						<view class="main_chart_top_content">
							<view class="main_chart_top_content_text">
								<h4>在线下单</h4>
								<span>置办您的生活家居</span>
							</view>
						</view>
					</view>
					<view class="main_chart_buttom" @click="familyPhotoAlbum()">
						<view class="main_chart_buttom_img" >
							<image src="../../static/image/xiangce@2x.png" mode="aspectFit"></image>
						</view>
						<view class="main_chart_buttom_content">
							<view class="main_chart_buttom_content_text">
								<h4>亲情相册</h4>
								<span>记录老人精彩瞬间</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content_bottom">
				<view class="other">
					<h4>其他功能</h4>
				</view>
				<view class="menu">
					<view class="single" @click="billQuery()" style="margin-left: 37rpx;">
						<image class="ite_mimg" src="/static/image/zhangdan@2x.png" mode="aspectFit"></image>
						<view class="item_title">账单查询</view>
						<view class="item_content">缴费方便快捷</view>
					</view>
					<view class="single" @click="smartHome()">
						<image class="ite_mimg" src="/static/image/zhinengjiaju@2x.png" mode="aspectFit"></image>
						<view class="item_title">智能家居</view>
						<view class="item_content">全屋科学掌控</view>
					</view>
					<view class="single" @click="feedbackSuggestions()" >
						<image class="ite_mimg" src="/static/image/fankuijianyi@2x.png" mode="aspectFit"></image>
						<view class="item_title">活动报名</view>
						<view class="item_content">快乐活动</view>
					</view>
					<view class="single"  @click="toLocation()" >
						<image class="ite_mimg" src="/static/image/guijidingwei.png" mode="aspectFit"></image>
						<view class="item_title">轨迹定位</view>
						<view class="item_content">了解老人行踪</view>
					</view>
					<view class="single" @click="DietaryConsultant()">
						<image class="ite_mimg" src="/static/image/shanshiguanli@2x.png" mode="aspectFit"></image>
						<view class="item_title">膳食顾问</view>
						<view class="item_content">了解今日膳食</view>
					</view>
					<view class="single" @click="dailyMeal()" >
						<image class="ite_mimg" src="/static/image/meirijiucanshuju@2x.png" mode="aspectFit"></image>
						<view class="item_title">每日就餐</view>
						<view class="item_content">了解老人就餐</view>
					</view>
					<view class="single" @click="card()"  style="margin-right: 60rpx;">
						<image class="ite_mimg" src="/static/image/yiqiatongguanli_hover@2x.png" mode="aspectFit"></image>
						<view class="item_title">一卡通</view>
						<view class="item_content">了解老人消费</view>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//==================对话框====================//
				quantityTotal: 0,
				iconType: ['clear'],
			}
		},
		onShow() {
			this.groupHouseNo=uni.getStorageSync("house")
			this.getWarningNumber()
			this.onSocketMessage()
		},
		methods: {
			//	打开成功监听服务器返回的告警信息
			onSocketMessage() {
				uni.onSocketMessage(res => {
					// console.log(JSON.parse(res.data));
					const data = JSON.parse(res.data)
					if (data.code == "99") {
						if (data.hasOwnProperty("msg")) {
							if (data.msg != 'ping') {
								getApp().globalData.getSocketMsg(res.data);
								if (data.msgType == "pension.com.alarm.entity.Alarm" ) {
									console.log(data);
									this.getWarningNumber();
								}
							}
						}
					}
				});
			},
			//获取警告列表
				async getWarningNumber () {
					const res = await this.$myRequest({
						url: '/api-alarm/alarms/',
						method: "get",
						data: {
							houseNo:this.groupHouseNo,
							// pageSize:"10"
						}
					})
					if (res.success == true) {
						this.quantityTotal = res.data.totalSize;
				}
			},
			//在线下单
			orderOnline() {
				uni.navigateTo({
					url: "/pages/orderOnline/index"
				})
			},
			//账单查询
			billQuery() {
				uni.navigateTo({
					url: "/pages/billQuery/index"
				})
			},
			//亲情相册
			familyPhotoAlbum() {
				uni.navigateTo({
					url: "/pages/familyPhotoAlbum/index"
				})
			},
			// 轨迹定位
			toLocation(){
				uni.navigateTo({
					url: "/pages/location/index"
				})
			},
			//智能家居
			smartHome() {
				uni.navigateTo({
					url: "/pages/smartHome/index"
				})
			},
			//家属管理
			familyManagement() {
				uni.navigateTo({
					url: "/pages/familyManagement/index"
				})
			},
			//健康数据
			healthData() {
				uni.navigateTo({
					url: "/pages/healthData/index"
				})
			},
			//活动报名
			feedbackSuggestions() {
				uni.navigateTo({
					url: "/pages/registration/index"
				})
			},
			//告警信息
			callThePolice() {
				uni.navigateTo({
					url: "/pages/callThePolice/index"
				})
			},
			//膳食顾问
			DietaryConsultant(){
				uni.navigateTo({
					url: "/pages/callThePolice/menuAlarm/settlementDesk"
				})
			},
			//每日就餐情况
			dailyMeal(){
				uni.navigateTo({
					url: "/pages/dailyMeal/index"
				})
			},
			//一卡通
			card(){
				uni.navigateTo({
					url: "/pages/card/xaiofeizhangdan"
				})
			}
			//==================对话框====================//
			
		}
	}
</script>

<style lang="scss" scoped>
	.main_chart::before{
		content: "";
		border-radius: 25rpx;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: -1;
		background-image: url("../../static/image/Wechatback.jpg");
		background-size: cover;
		opacity: 0.2;
	}
	.chart {
		margin-top: 8%;
		width: 100%;
		height: 340rpx;
		.main_chart{
			position: relative;
			border-radius: 25rpx;
			box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2),
						20rpx 0rpx 100rpx 20rpx #ffffff inset,
						-20rpx 0rpx 100rpx 20rpx #ffffff inset
						;
			width: 90%;
			height: 350rpx;
			margin: auto;
			background-size: cover;
			.main_chart_left{
				float: left;
				width: 40%;
				height: 100%;
				.main_chart_left_top{
					width: 100%;
					height: 50%;
					image{
						padding: 40rpx 0 0 10%;
						width: 40%;
						height: 40%;
					}
				}
				.main_chart_left_buttom{
					padding: 0 0 0 15%;
					width: 80%;
					height: 50%;
					line-height: 100%;
					h4 {
						color: #c22030;
						padding: 0 0 25rpx 0rpx;
					}
					span {
						font-size: 20rpx;
					}
				}
			}
			.main_chart_right{
				float: right;
				width: 59%;
				height: 100%;
				border-left: 1px solid #BDBDBD;
				.main_chart_top{
					width: 100%;
					height: 50%;
					display: flex;
					flex-direction: row; 
					align-items: center;
					border-bottom: 1px solid #BDBDBD;;
					.main_chart_top_img{
						float: left;
						width: 40%;
						height: 100%;
						display:flex;
						justify-content:center;
						align-items:center;
						image{
							width: 45%;
							height: 45%;
						}
					}
					.main_chart_top_content{
						float: right;
						width: 60%;
						height: 100%;
						display:flex;
						align-items:center;
						.main_chart_top_content_text{
							h4 {
								color: #c22030;
							}
							span {
								font-size: 20rpx;
							}
						}
					}
				}
				.main_chart_buttom{
					width: 100%;
					height: 50%;
					display: flex;
					flex-direction: row; 
					align-items: center;
					.main_chart_buttom_img{
						float: left;
						width: 40%;
						height: 100%;
						display:flex;
						justify-content:center;
						align-items:center;
						image{
							width: 45%;
							height: 45%;
						}
					}
					.main_chart_buttom_content{
						float: right;
						width: 60%;
						height: 100%;
						display:flex;
						align-items:center;
						.main_chart_buttom_content_text{
							h4 {
								color: #c22030;
							}
							span {
								font-size: 20rpx;
							}
						}
					}
				}
			}
		}
	}
	
	.menu{
		scroll-snap-type: x mandatory;
		width: 100%;
		height: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		overflow-x: scroll;
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
		-webkit-overflow-scrolling: touch;
		padding: 0rpx 0rpx 0rpx 10rpx;
		scrollbar-width: none;
	}
	.menu::-webkit-scrollbar {  //隐藏滚动条
		display: none;
		width: 0;
	}
	.main_chart_right::-webkit-scrollbar {
		display: none;
		width: 0;
	}
	::-webkit-scrollbar {
		display: none;
		width: 0;
	}
	.single {
		width: 28%;
		background: #FFFFFF;
		border-radius: 25rpx;
		display: inline-block;
		line-height: 100%;
		margin: 0rpx 0rpx 0rpx 20rpx;
		// 滚动贴合 贴合方式为每个元素的left-end
		scroll-snap-align: end;
		.ite_mimg {
			width: 60rpx;
			height: 60rpx;
			padding: 38rpx 0rpx 0rpx 30rpx;
		}
		.item_title{
			padding: 58rpx 0rpx 0rpx 30rpx;
			color: #000000;
		}
		.item_content{
			color: #a8a8a8;
			font-size: 20rpx;
			padding: 28rpx 0rpx 30rpx 30rpx;
		}
	}	
	
	.top {
		width: 100%;
		height: 432rpx;
		position: relative;

		.toDoList {
			background: #fdfdfe;
			border-radius: 25px;
			z-index: 999;
			width: 90%;
			height: 80rpx;
			top: 100%;
			left: 50%;
			transform: translate(-50%, -50%);
			position: absolute;
			opacity: 0.9;

			image {
				margin-top: 20rpx;
				margin-left: 60rpx;
				margin-right: 30rpx;
				padding: 0rpx;
				width: 40rpx;
				height: 40rpx;
			}

			text {
				position: absolute;
				margin-top: 20rpx;
				padding: 0rpx;
				font-size: 28rpx;
				color: #666666;

			}
		}

		.layer_background {
			z-index: 10;
			width: 100%;
			height: 432rpx;
		}

		.layer_logo {
			// position: absolute;
			z-index: 19;
			width: 40%;
			height: 40%;
			// position: absolute;
			// top: 25%;
			// left: 50%;
			// transform: translate(-50%, -50%);
			display:table;
			margin:0 auto;
			top: -100%;
		}
	}

	
	.other {
		width: 90%;
		margin: 15rpx 5% 20rpx 5%;
		display: flex;
		border-left: 3px solid #c22030;
		h4 {
			padding: 2rpx 0rpx 2rpx 20rpx;
			color: #c22030;
			border-radius: 10px;
		}
	}


	//==================对话框====================//
	.retip {
		background-color: rgba(0, 0, 0, 0.4);
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.Close_tips {
		background-color: #FFFFFF;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;

		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;
	}

	.tips_Container {
		width: 680rpx;
		height: 710rpx;
		background-color: #FCF2E9;
		border-radius: 25rpx;
		display: flex;
		flex-direction: column;
		font-weight: bold;
		font-size: 40rpx;
		margin-bottom: 25px;

		text:nth-child(2) {
			margin: 20rpx 40rpx 0 40rpx;
		}

		text:nth-child(3) {
			margin: 20rpx 40rpx 0 40rpx;
		}

		text:nth-child(4) {
			margin: 20rpx 40rpx 0 40rpx;
			text-align: right;
		}

		image {
			margin: -50rpx auto 0 auto;
			height: 120rpx;
		}
	}
	.content_bottom{
		width: 100%;
		margin-bottom: 8%;
		//其他功能样式
	}
</style>
